<template>
  <div class="container">
    <!--    <el-tooltip :disabled="isBought" effect="dark" content="请购买后再评论" placement="top">-->
    <el-rate v-model="score" :disabled="!isBought"></el-rate>
    <!--    </el-tooltip>-->
    <el-tooltip :disabled="isBought" effect="dark" content="请购买后再评论" placement="top">
      <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="inputComment"
          autosize
          maxlength="100"
          show-word-limit
          clearable
          style="padding-top: 10px"
          v-on:focus="startReply=true"
          v-on:blur="startReply=(inputComment.length>0)"
          :disabled="!isBought"
      >
      </el-input>
    </el-tooltip>
    <el-button v-show="startReply" type="primary" style="margin-left: 10px;margin-top: 10px;float: right"
               :disabled="inputComment.length==0||score==0" @click="commitComment">发布
    </el-button>
  </div>
</template>

<script>
import {addComment, addScores} from "@/api/user";

export default {
  props: {
    isBought: {
      type: Boolean,
      require: true
    },
    gameId: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      inputComment: '',
      startReply: false,
      inputWidth: '',
      score: null,
      pageWidth: document.body.clientWidth,
    }
  },
  computed: {},
  methods: {
    commitComment() {
      // console.log(this.inputComment);
      console.log(this.$store.getters.getToken)
      console.log(this.score)
      console.log(this.gameId);
      console.log(this.inputComment)
      addComment(this.$store.getters.getToken, this.gameId, encodeURIComponent(this.inputComment), 0).then(response => {
        let code = response.data.code;
        console.log(response.data)
        if (code == 200) {
          addScores(this.$store.getters.getToken, this.gameId, this.score).then(response => {
            let code = response.data.code;
            console.log(response.data)
            if (code == 200) {
              this.$message({
                message: '评论已发布',
                type: 'success'
              })
              this.inputComment = ''
              this.score = null
            }
          })
        }
      })
    },
  },
}
</script>

<style scoped>
</style>